<template lang="pug">
.foot-menu.animated.bounceInUp(
  v-if='getMenuStatus',
  ref='footWrap',
  :class='{ active: getMenuStyleObj }',
  @touchmove='handleDragPrevent'
)
  transition(name='fade', tag='div')
    Scene.scene-n.scene
</template>

<script>
import { filterMenu } from '@/utils/menu'
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  async mounted() {
    this.menuDataList = await filterMenu(this.$CONFIG.defMenu)
  },
  data (){
    return {
    }
  },
  methods: {
    showBottomMenu() {
      this.formatActions(this.getBottomMenu, this.handleBtMenu)
      this.handleSheet()
    },
  },
  components: {
    Scene : ()=>import('./Scene')
  }
}
</script>

<style lang="stylus">
$white = #fff
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff

.fade-enter
  opacity 0

.fade-enter-active
  animation fade 0.3s ease

.fade-leave-active
  animation fade 0.3s ease reverse

@keyframes fade
  0%
    opacity 0
  100%
    opacity 1

.scene-menu
  position absolute
  bottom 65px
  right 3%
  z-index 20

.theme-pc-n
  .scene-n
    bottom 100px !important
  .scene-menu
    bottom 110px !important

.theme-app-a
  .foot-menu
    .fade-out
      opacity 0
      transition all 0.3s ease
    .scene-n
      bottom 110px
      left 0px
      opacity 1
      transition all 0.3s ease
    .foot-menu-list
      flex-cnter()

      padding 10px 0
      box-sizing border-box
      color #fff
      .menu-item
        flex 1
        max-width 46px
        align-self center
        display inline-block
        text-align center
        cursor pointer
        .menu-text
          font-size 10px
          margin-top 5px
        .menu-icon
          display inline-block
          width 28px
          height 28px
          line-height 28px
          border-radius 50%
          transition all 1s
          background-color $white
          i
            color $theme-classic-color
            vertical-align middle
</style>
